<template>
	<!-- 商品卡牌 -->
	<view>
		<block>
			<view class="box" v-for="(item,index) in content" :key="item">
				<view class="box_left">
					<view class="box_left_img"
						@tap="routergo('/pages/order_all/goodsordersearch/goodsordersearch?id='+item.id+'&store_id='+store_id+'&activate_data='+activate_data+'&type='+item.type)">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="box_left_img_text" v-if="item.tags"> {{item.tags}}</view>
					</view>
				</view>
				<view class="box_right">
					<text class="box_right_title"
						@tap="routergo('/pages/order_all/goodsordersearch/goodsordersearch?id='+item.id+'&store_id='+store_id+'&activate_data='+activate_data+'&type='+item.type)">
						{{item.title}}</text>
					<view class="box_right_ranking" v-if="item.xl_desc">{{item.xl_desc}}</view>
					<view class="box_right_sell">月售{{item.count}}+</view>
					<view class="box_right_sell" v-if="item.market_price">原价:¥{{item.market_price}}</view>
					<view class="box_right_price">
						<view class="box_right_price_left" :class="{'is_market':item.market_price}">¥{{item.minprice}}</view>
						<view v-if="item.sku_count>0" class="box_right_price_right" @tap="stop(item.id,item.type)">
							<text> 选规格</text>
						</view>
						<view v-else @click="add_joinCar(item.id)" class="box_right_price_right_1">
							<text>加入购物车</text>
						</view>
					</view>
				</view>
			</view>
		</block>
		<login v-if="enter" @loadpage="unloadpage" @closepage='closepage'></login>
	</view>
</template>

<script>
	import {
		order_joinCar,
	} from "@/api/comm.js"
	export default {
		name: "ordercard",
		props: {
			content: {
				type: Array,
				default: [],
				required: true
			},
			store_id: {
				type: String,
				default: ' ',
				required: true
			},
			activate_data: {
				type: Number,
				default: '',
				required: true
			},
		},
		data() {
			return {
				enter: '',
			};
		},
		methods: {
			// 添加购物车
			async add_joinCar(id) {
		
				if (!uni.getStorageSync('userinfo')) {
					this.$emit('login')
					return
				}
				let data = await order_joinCar({
					store_id: this.store_id,
					goods_id: id,
					count: 1,
					order_type: this.activate_data,
				})
				if (data.code == 1) {
					uni.showToast({
						title: data.msg,
						icon: "none"
					})
					this.$emit('order')
				} else {
					uni.showToast({
						title: data.msg,
						icon: "none"
					})
				}
			},

			routergo(url) {
				uni.navigateTo({
					url: url
				})
			},
			stop(e, type) {
				let obj = {
					e,
					type
				}
				this.$emit('specification', obj)
			},
			//未登录关闭弹出层需要关掉组件
			closepage() {
				this.enter = false
			},
		}
	}
</script>

<style lang="scss">
	.box {
		padding-bottom: 60rpx;
		display: flex;

		.box_left {
			.box_left_img {
				width: 220rpx;
				height: 218rpx;
				position: relative;

				image {
					border-radius: 11rpx;
				}

				.box_left_img_text {
					width: 63rpx;
					height: 36rpx;
					background: #6F3810;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FDFEFF;
					line-height: 36rpx;
					text-align: center;
					padding: 3rpx 5rpx;
					position: absolute;
					top: -10rpx;
					right: -5rpx;
				}
			}
		}

		.box_right {
			width: 300rpx;
			margin-left: 20rpx;

			.box_right_title {
				font-size: 32rpx;
				font-weight: 600;
				color: #353535;
				display: inline-block;
				margin: 10rpx 0;
			}

			.box_right_ranking {
				width: 182rpx;
				height: 34rpx;
				background: #ECF3FF;
				border-radius: 6rpx;
				line-height: 34rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #6F3810;
				margin-bottom: 20rpx;
			}

			.box_right_sell {
				font-size: 24rpx;
				font-weight: 400;
				color: #8A8A8A;
				margin-bottom: 20rpx;
			}

			.box_right_price {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.box_right_price_left {
					font-size: 32rpx;
					font-weight: 600;
					color: #353535;
					&.is_market{
						color: #FC4F46;
					}
				}

				.box_right_price_right_1 {
					width: 150rpx;
					height: 47rpx;
					background: #6F3810;
					border-radius: 17rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FDFEFF;
					line-height: 47rpx;
					text-align: center;
					position: relative;
				}

				.box_right_price_right {
					width: 101rpx;
					height: 47rpx;
					background: #6F3810;
					border-radius: 17rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FDFEFF;
					line-height: 47rpx;
					text-align: center;
					position: relative;

					.box_right_price_right_count {
						width: 30rpx;
						height: 30rpx;
						background: #F65329;
						border-radius: 50%;
						text-align: center;
						line-height: 30rpx;
						font-size: 24rpx;
						font-weight: 600;
						color: #FFF8F6;
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}

				}
			}
		}
	}
</style>